<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
    <link type="text/css"  rel="stylesheet" th:href="@{/js/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
    <script type="text/javascript" th:src="@{/js/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
    <link type="text/css"  rel="stylesheet" th:href="@{/js/bootstrap-treeview/bootstrap-treeview.min.css}">
    <script type="text/javascript" th:src="@{/js/bootStrap-addTabs/bootstrap.addtabs.min.js}"></script>
    <link type="text/css"  rel="stylesheet" th:href="@{/js/bootStrap-addTabs/bootstrap.addtabs.css}">
    <script type="text/javascript" th:src="@{/js/bootstrap-table/bootstrap-table.js}"></script>
    <link type="text/css"  rel="stylesheet" th:href="@{/js/bootstrap-table/bootstrap-table.css}">
    <script type="text/javascript" th:src="@{/js/bootstrap-fileinput/js/fileinput.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap-bootbox/bootbox.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap-fileinput/js/locales/zh.js}"></script>
    <link type="text/css"  rel="stylesheet" th:href="@{/js/bootstrap-fileinput/css/fileinput.min.css}">

</head>

<body>

<button class="btn btn-primary btn-lg" onclick="add()" data-toggle="modal"  data-target="#myModal">
    新增
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <H4 class="modal-title" id="myModalLabel">
                    新增图片
                </H4>

            </div>
            <div class="modal-body">
                <form method="post" class="form-horizontal"  role="form" id="myForm" >
                    <div class="form-group" >
                        <label>商品id</label>
                        <div class="col-sm-10">
                            <input type="text" width="100px" class="form-control" name="commodityId" id="comm"  onblur="on()"> <span id="span"><font color="red"></font></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>图的描述</label>
                        <div class="col-sm-10">
                            <input type="text" width="100px" class="form-control" name="slideshowInfo">
                        </div>
                    </div>

                    <div>
                        <label for="file‐Portrait">图片</label>
                        <input type="file" name="imgfile" class="form-control" id="file‐Portrait" >
                        <input type="hidden"  name="slideshowImg" id="reqpath" >
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="submitForm()">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<table id="table"></table>
</body>
<script type="text/javascript">
    $("#table").bootstrapTable({
        url:"../gyc/getList",
        columns:[

            {field:'slideshowId',title:'轮播图ID'},
            {field:'slideshowImg',title:'轮播图',formatter:function(value,row,index){
                    return '<img  src='+value+' width="50" height="50"/> ';
                }},
            {field:'commodityId',title:'商品ID'},
            {field:'slideshowInfo',title:'轮播图描述'},
            {field:'groundingshow',title:'上下架轮播图',formatter:function(value,row){
                    let str = "";
                    if(value===0){
                        return "上架"
                    }else if(value===1){
                        return "下架";
                    }}},
            {field:'cz',title:'操作',formatter:function(value,row){
                    var str = "";
                    if (row.groundingshow===0){
                        str += "<a href='javascript:undercarriage("+row.slideshowId+")'>下架 </a>";
                    }else{
                        str += "<a href='javascript:grounding("+row.slideshowId+")'>上架 </a>";
                    }
                    str += "<a href='javascript:upShowStatus("+row.slideshowId+")'> 删除</a>";
                    return str;
                }},

        ],
        pagination:true,
        pageSize:6,
        pageList:[6,8,10],
        sidePagination : 'client',//server:服务器端分页{rows:[],total:10}|client
//：前端分页 [{},{}]
    })

    //删除
    function upShowStatus(slideshowId){
        $.ajax({
            url:"../gyc/upShowStatus",
            data:{slideshowId:slideshowId},
            success:function(){
                $("#table").bootstrapTable('refresh');//成功后刷新表格
            }
        })
    }
    //事件
    function on(){
        $("#span").html("");
        var commodityId =document.getElementById("comm").value
        $.ajax({
            url:"../gyc/on",
            data:{commodityId:commodityId},
            success:function(data){
                if (data.code==200){
                    $("#span").html("√")
                }

            }
        })
    }




    //下架
    function undercarriage(slideshowId){
        $.ajax({
            url:"../gyc/undercarriage",
            data:{slideshowId:slideshowId},
            success:function(){
                $("#table").bootstrapTable('refresh');//成功后刷新表格
            }
        })
    }

    //上架
    function grounding(slideshowId){
        $.ajax({
            url:"../gyc/grounding",
            data:{slideshowId:slideshowId},
            success:function(){
                $("#table").bootstrapTable('refresh');//成功后刷新表格
            }
        })
    }
    $('#myModal').on('hidden.bs.modal', function () {


        document.querySelector('#myForm').reset();

        $("#span").html("");

        document.getElementById("myForm").reset();




    });


    function submitForm(){
        $.ajax({
            url:"../gyc/addShow",
            data:$("#myForm").serialize(),
            success:function(data){

                if(data.code==200){
                    alert("新增成功");
                    $("#table").bootstrapTable('refresh');//成功后刷新表格
                    $("#myModal").modal('hide');
                }else if(data.code==201){
                    alert('无该商品，请核对！');
                }


            }
        })
    }








    $('#file‐Portrait').fileinput({
        language: 'zh', //设置语言
        uploadUrl: "../gyc/upload", //上传的地址
        allowedFileExtensions : ['jpg', 'png','gif','bmp'],//接收的文件后缀,
        maxFileCount: 100,
        enctype: 'multipart/form‐data',
        showUpload: true, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn‐primary", //按钮样式
        previewFileIcon: "<i class='glyphicon glyphicon‐king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    })
    $('#file‐Portrait').on("fileuploaded", function (event, data, previewId, index) {

        /* alert(data.response.requestPath)
         console.log(data.response);
         console.log(data.response.requestPath);*/
        console.log(data.response.url);
        $("#reqpath").val(data.response.url);
    });






</script>
</html>